<!DOCTYPE html>
<html>
<head>
	<title>Add / remove items</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<script>
		var myMenu;
		var itemImg;
		var parentId;
		var itemId;
		function doOnLoad() {
			myMenu = new dhtmlXMenuObject({
				parent: "menuObj",
				icons_path: "../common/imgs/",
				xml: "../common/dhxmenu.xml"
			});
			myMenu.attachEvent("onClick", changeParent);
			itemImg = "copy";
			parentId = null;
			itemId = 0;
		}
		function changeIcon(obj, icon) {
			document.getElementById("icon_src").src = obj.src;
			itemImg = icon;
		}
		function changeParent(id) {
			parentId = id;
			var text = myMenu.getItemText(id);
			document.getElementById("item_parent").innerHTML = id + " ("+text+")";
			document.getElementById("item_id").innerHTML = id + " ("+text+")";
		}
		function addItem() {
			if (parentId == null) { alert("Please select parentId"); return; }
			var itemText = document.getElementById("item_text").value;
			if (itemText.length == 0) { itemText = "New Item"; }
			var img = "";
			var imgDis = "";
			if (document.getElementById("icon_exists").checked) {
				img = itemImg+".gif";
				imgDis = itemImg+"_dis.gif";
			}
			var opts = document.getElementById("add_type");
			if (opts.options[opts.selectedIndex].value == "0") {
				myMenu.addNewChild(parentId, 0, "item_"+itemId, itemText, false, img, imgDis);
			} else {
				myMenu.addNewSibling(parentId, "item_"+itemId, itemText, false, img, imgDis);
			}
			itemId++;
			parentId = null;
			document.getElementById("item_parent").innerHTML = "(Click menu to select)";
			document.getElementById("item_id").innerHTML = "(Click menu to select)";
		}
		function removeItem() {
			if (parentId == null) { alert("Please select itemId"); return; }
			myMenu.removeItem(parentId);
			parentId = null;
			document.getElementById("item_parent").innerHTML = "(Click menu to select)";
			document.getElementById("item_id").innerHTML = "(Click menu to select)";
		}
	</script>
</head>
<body onload="doOnLoad()">
	<div style="height: 250px;"><div id="menuObj"></div></div>
	<div>
		<table border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td valign="top">
					<table border="0" cellspacing="0" cellpadding="0">
						<th colspan="3" style="padding-bottom: 10px;">Add New Item</th>
						<tr>
							<td>Item Type</td>
							<td width="10">&nbsp;</td>
							<td><select id="add_type"><option value="0">Child</option><option value="1">Sibling</option></select></td>
						</tr>
						<tr>
							<td>Parent</td>
							<td>&nbsp;</td>
							<td><div id="item_parent" style="font-weight: bold;">(Click menu to select)</div></td>
						</tr>
						<tr>
							<td>Item Text</td>
							<td>&nbsp;</td>
							<td><input id="item_text" type="text" value=""></td>
						</tr>
						<tr>
							<td>Item Has Icon</td>
							<td>&nbsp;</td>
							<td>
								<span><input id="icon_exists" type="checkbox" checked></span>
								<span><img id="icon_src" width="18" height="18" border="0" src="../common/imgs/copy.gif"></span>
							</td>
						</tr>
						<tr>
							<td>Icon Source</td>
							<td>&nbsp;</td>
							<td>
								<span><img onclick="changeIcon(this, 'copy');" width="18" height="18" border="0" src="../common/imgs/copy.gif"></span>
								<span><img onclick="changeIcon(this, 'cut');" width="18" height="18" border="0" src="../common/imgs/cut.gif"></span>
								<span><img onclick="changeIcon(this, 'new');" width="18" height="18" border="0" src="../common/imgs/new.gif"></span>
								<span><img onclick="changeIcon(this, 'paste');" width="18" height="18" border="0" src="../common/imgs/paste.gif"></span>
								<span><img onclick="changeIcon(this, 'print');" width="18" height="18" border="0" src="../common/imgs/print.gif"></span>
								<span><img onclick="changeIcon(this, 'redo');" width="18" height="18" border="0" src="../common/imgs/redo.gif"></span>
								<span><img onclick="changeIcon(this, 'undo');" width="18" height="18" border="0" src="../common/imgs/undo.gif"></span>
								<span><img onclick="changeIcon(this, 'save');" width="18" height="18" border="0" src="../common/imgs/save.gif"></span>
								<span><img onclick="changeIcon(this, 'select_all');" width="18" height="18" border="0" src="../common/imgs/select_all.gif"></span>
							</td>
						</tr>
						<tr>
							<td>&nbsp;</td>
							<td>&nbsp;</td>
							<td><input type="button" value="Add Item" style="margin-top: 10px;" onclick="addItem();"></td>
						</tr>
					</table>
				</td>
				<td width="30">&nbsp;</td>
				<td valign="top">
					<table border="0" cellspacing="0" cellpadding="0">
						<th colspan="3" style="padding-bottom: 10px;">Remove Item</th>
						<tr>
							<td>Item</td>
							<td>&nbsp;</td>
							<td><div id="item_id" style="font-weight: bold;">(Click menu to select)</div></td>
						</tr>
						<tr>
							<td colspan="3" align="center"><input type="button" value="Remove Item" style="margin-top: 10px;" onclick="removeItem();"></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>